<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>考勤明细</title>
</head>
<style>
    *, :after, :before {
        box-sizing: border-box;
    }

    body, html {
        -webkit-tap-highlight-color: none;
        font-family: "Microsoft Yahei", "PingFang SC", SimSun, "Helvetica Neue", Helvetica, Arial, sans-serif, Tahoma;
        background-color: #eee;
        color: #505050;
        margin: 0;
    }

    .is-gray {
        color: rgba(80, 80, 80, 1);
    }

    .is-bold {
        font-weight: bold;
    }

    .header {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 199307100337;
        margin: auto;

        background-color: #fff;
        width: 100%;
        height: 78px;
        line-height: 78px;
        box-shadow: 0 7px 10px rgb(228, 222, 222);
    }

    .header__title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: auto;

        font-size: 20px;
        width: 1300px;
        height: 100%;
    }

    .header__logo {
        display: flex;
        justify-content: center;
        align-items: center;

        height: 100%;
    }

    .header__line {
        margin: auto 20px;
        height: 38px;
        width: 2px;
        background: #f1f1f2;
    }

    .body {
        margin: 100px 10px 30px;
    }

    .card {
        display: none;
        position: relative;
        margin: 0 auto;
        padding-bottom: 100px; /* 解决 .card__footer fixed 物理高度问题 */

        background-color: #fff;
        width: 750px;
        height: auto;
        min-height: 650px;
        border-radius: 4px;
        border: 1px solid #f2f2f2;
        box-shadow: 0 10px 10px rgba(218, 198, 198, 0.2);
    }

    .card__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        border-bottom: 1px solid #f2f2f2;
        padding: 20px;
        border-radius: 5px 5px 0px 0px;
        background-color: #aa8450;
        color: #ffffff
    }

    .card__header--title {
        font-size: 18px;
        line-height: 35px;
    }

    .card__header--text {
        font-size: 20px;
    }

    .card__body {
        padding: 10px 20px;
    }

    .card__ul {
        margin: 0;
        padding: 0;
    }

    .card__li {
        display: flex;
        justify-content: space-around;
        align-items: center;

        height: 36px;
        font-size: 14px;
        text-align: center;
    }

    .card__li:nth-child(odd) {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
    }

    .card__li:nth-child(even) {
        background-color: #f2f2f2;
        border-bottom: 1px solid #ddd;
    }

    .card__li:last-child {
        border-bottom: 0;
    }

    .card__li--left {
        flex: 3;
        padding: 0 20px;
        color: rgba(80, 80, 80, 1);
        padding: 13px;
        text-align: left;
        white-space: nowrap;
    }

    .card__li--right {
        flex: 1;
        text-align: right;
        padding: 13px;
    }

    .card__footer {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-direction: column;
        position: absolute;
        bottom: 0;

        height: 100px;
        padding: 20px;
        width: 100%;
        border-top: 1px solid #f2f2f2;
    }

    .card__foter--title {
        font-size: 18px;
    }

    .card__foter--text {
        font-size: 12px;
    }

    /* 移动设备断点 */
    @media (max-width: 768px) {
        /* 移动端下宽度铺满 */
        .header__title,
        .header__logo,
        .card {
            width: 100%;
        }

        /* 移动端溢出用...隐藏 */
        .card__li--left {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 部分内容隐藏 */
        .header__line,
        .header__name {
            display: none;
        }
    }
</style>
<body>

<div class="header">
    <div class="header__title">
        <div class="header__logo" id="logo"></div>
        <div class="header__line"></div>
        <div class="header__name">考勤明细</div>
    </div>
</div>
<div class="body">
    <div class="card js-card">
        <div class="card__header">
            <div class="card__header--left">
                <div class="card__header--title">考勤月份</div>
                <div class="card__header--text" id="sendTime"></div>
            </div>
            <div class="card__header--right">
                <div class="card__header--title" id="topColmnName"></div>
                <div class="card__header--text" id="topColmnValue"></div>
            </div>
        </div>
        <div class="card__body" id="cardBody">

        </div>
        <div class="card__footer" id="foot">
        </div>
    </div>
</div>
<div class="footer"></div>


<!--引入layui.js-->
<script src="/plugins/layui/layui.js"></script>
<script src="/properties/config.js"></script>

<script type="text/html" id="htLogo">
    <img src="http://xiaodaioa.oss-cn-beijing.aliyuncs.com/upload/pms/115b47b5-eaae-4692-b354-8b81bb08d4a2.png" alt="鸿特金服"/>
</script>

<script type="text/html" id="zcLogo">
    <i>东莞市志诚非融资性担保有限公司</i>
</script>

<script type="text/html" id="tdLogo">
    <i>深圳市天大联合融资担保有限公司</i>
</script>

<script type="text/html" id="lsLogo">
    <i>东莞市联胜非融资性担保有限公司</i>
</script>

<script type="text/html" id="fcLogo">
    <i>深圳市富诚资产管理有限公司</i>
</script>

<script type="text/html" id="zqLogo">
    <i>西安志勤不良资产处置有限公司</i>
</script>

<script type="text/html" id="cqLogo">
    <i>广东车全汽车供应链有限公司</i>
</script>

<script type="text/html" id="cardFootTempOne">
    <div class="card__foter--text is-gray">温馨提示：如有异议请在<b id="checkTime"></b>前与人力资源中心<b id="contactName"></b>联系，如不回复即视为无异议。</div>
</script>

<script src="/src/js/send/salaryemailinner.js"></script>
</body>
</html>